import React from 'react';
import {dark, light} from '../../config';
import {pxToDp} from '../../utils/stylesKits';
import {Appearance} from 'react-native';
import {connect} from 'react-redux';
import {Icon} from '@ant-design/react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Index from './index/index';
import My from './my';
import Pins from './pins';

/**
 * APP Home 页面
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */
const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;
const Tab = createBottomTabNavigator();

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    return (
      <Tab.Navigator
        screenOptions={{
          tabBarActiveTintColor: '#2387d7',
          tabBarInactiveTintColor: colorScheme.color,
          tabBarLabelStyle: {marginBottom: pxToDp(8)},
        }}>
        <Tab.Screen
          name="首页"
          component={Index}
          options={{
            headerShown: false,
            tabBarIcon: ({focused, color, size}) => (
              <Icon name="home" size={size} color={color} />
            ),
          }}
        />
        <Tab.Screen
          name="粪点"
          component={Pins}
          options={{
            headerShown: false,
            tabBarIcon: ({focused, color, size}) => (
              <Icon name="slack" size={size} color={color} />
            ),
          }}
        />
        <Tab.Screen
          name="我的"
          component={My}
          options={{
            headerShown: false,
            tabBarIcon: ({focused, color, size}) => (
              <Icon name="user" size={size} color={color} />
            ),
          }}
        />
      </Tab.Navigator>
    );
  }
}

const mapStateToProps = state => ({});
const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(Home);
